<template>
  <div class="journal-part-5">
    <div class="no-scrollbar scroll-x table-1">
      <div class="table">
        <div class="table-header">
          <div class="cell flex-1">Task Codes</div>
        </div>
        <div class="table-body">
          <div
            class="row-outer"
            v-for="(itemArr, index) in paramsData"
            :key="index"
          >
            <div class="row" v-for="(item, index) in itemArr" :key="item.title">
              <div class="cell">{{ item.title }}</div>
              <div class="cell">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="table2-header-title"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div class="part-title" style="white-space: nowrap">
        Part VI - {{ $t("btnText.task.part_6") }}
      </div>
      <div class="footer-btn" v-if="sixData && sixData.length == 0" style="margin-top: 0">
        <a-button type="primary" @click="addRowData">{{
          $t("btnText.create")
        }}</a-button>
      </div>
    </div>
    <div class="no-scrollbar scroll-x table-2">
      <div class="table">
        <div class="table-header">
          <div class="cell date">{{ $t("form.task.date") }}</div>
          <div class="flex-1">
            <div class="row">
              <div class="cell AIRCRAFT">AIRCRAFT</div>
              <div class="cell flex-1">ACTION</div>
              <div class="cell FUNCION">FUNCION</div>
            </div>
            <div class="row">
              <div class="cell Type">Type</div>
              <div class="cell ACReg">AC Reg</div>
              <div class="cell">ATA<br />Chapter</div>
              <div class="cell flex-1">Subject</div>
              <div class="cell">SGH</div>
              <div class="cell">R/I</div>
              <div class="cell">ISP</div>
              <div class="cell">TS</div>
              <div class="cell">SGH</div>
              <div class="cell">MP</div>
              <div class="cell">Time<br />spent(h)</div>
              <div class="cell function">Execution<br />Person</div>
              <div class="cell function">Supervisor</div>
              <div class="cell function">CRS</div>
            </div>
          </div>
        </div>
        <div class="table-body">
          <div
            class="row"
            @click.stop="showEditPanel(item)"
            v-for="item in sixData"
            :key="item.id"
          >
            <!-- edit-panel -->
            <div class="edit-panel" v-if="item.show_edit">
              <span @click="addRowData">[{{ $t("btnText.add") }}]</span>
              <span @click="editRowData(item)">[{{ $t("btnText.edit") }}]</span>
              <span @click="deleteRowData(item)"
                >[{{ $t("btnText.delete") }}]</span
              >
              <span @click.stop="item.show_edit = false"
                >[{{ $t("btnText.close") }}]</span
              >
            </div>

            <div class="cell date">{{ item.date }}</div>
            <div class="cell Type">{{ item.type_new }}</div>
            <div class="cell ACReg">{{ item.ac }}</div>
            <div class="cell">{{ item.ata }}</div>
            <div class="cell subject flex-1">
              {{ item.subject }}
            </div>
            <div class="cell">
              <IconCheck v-if="item.sgh == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
            <div class="cell">
              <IconCheck v-if="item.ri == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
            <div class="cell">
              <IconCheck v-if="item.isp == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
            <div class="cell">
              <IconCheck v-if="item.ts == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
            <div class="cell">
              <IconCheck v-if="item.sgh == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
            <div class="cell">
              <IconCheck v-if="item.mp == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
            <div class="cell">{{ item.timespent }}</div>
            <div class="cell function">
              <IconCheck v-if="item.execution_person == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
            <div class="cell function">
              <IconCheck v-if="item.supervisor == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
            <div class="cell function">
              <IconCheck v-if="item.crs == '1'"></IconCheck>
              <span v-else>-</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ShowMore
      v-model:currentPage="listParmas.page"
      v-model:pageSize="listParmas.pageSize"
      :totalCount="listParmas.total"
      @change="getSixData"
    />

    <div class="footer-btn">
      <a-button @click="goto('/member/journal', { step: 5 })">{{
        $t("btnText.prev_step")
      }}</a-button>
      <a-button type="primary" @click="goto('/member/journal', { step: 7 })">{{
        $t("btnText.next_step")
      }}</a-button>
    </div>

    <DialogPartSix
      @complete="partSixDialogComplete"
      ref="dialogPartSixRef"
      :isAdd="dialogIsAdd"
      :data="dialogData"
    ></DialogPartSix>
  </div>
</template>

<script setup lang="ts">
import {
  getCurrentInstance,
  nextTick,
  onBeforeMount,
  onMounted,
  ref,
} from "vue";
import {
  postPartSixDataCreate,
  postPartSixDataMake,
  postPartSixData,
  postPartParamsData,
  postPartSixDataDelete,
} from "../../../../api/part";
import type { PartParams, PartSixData } from "../../../../types/part";
import { Modal, message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { postPartSixDataView } from "../../../../api/part";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const makeData = async () => {
  await postPartSixDataMake();
};

const paramsData = ref<PartParams[]>();
const getPartParamsData = async () => {
  let res = await postPartParamsData();
  if (res.code === 200) {
    let arr: any[] = [];
    res.data.map((item, index, rawArr) => {
      if (index % 2 == 0) {
        arr.push([rawArr[index], rawArr[index + 1]]);
      }
      return arr;
    });
    paramsData.value = arr;
  }
};

const sixData = ref<(PartSixData & { show_edit?: boolean })[]>();
const listParmas = ref({
  page: 1,
  total: 0,
  pageSize: 10,
});

const getSixData = async () => {
  const { page } = listParmas.value;
  let res = await postPartSixData({ page });
  if (res.code === 200) {
    sixData.value = res.data.data;
    listParmas.value.total = res.data.total;
    listParmas.value.pageSize = res.data.per_page;
  }
};

const showEditPanel = (item: any) => {
  closeAllEdit();
  item.show_edit = true;
};

const closeAllEdit = () => {
  sixData.value?.map((item) => {
    item.show_edit = false;
  });
};

const dialogIsAdd = ref(false);
const dialogData = ref();
const dialogPartSixRef = ref();
const addRowData = () => {
  if (isMobile()) {
    goto("/mobile/updatePartSix");
    return;
  }
  dialogIsAdd.value = true;
  dialogData.value = "";
  nextTick(() => {
    dialogPartSixRef.value.show();
  });
};

const editRowData = async (item) => {
  if (isMobile()) {
    goto("/mobile/updatePartSix");
    sessionStorage.setItem("params", JSON.stringify(item));
    return;
  }

  dialogIsAdd.value = false;
  // let res = await postPartSixDataView(item.id)
  // return

  dialogData.value = JSON.parse(JSON.stringify(item));
  nextTick(() => {
    dialogPartSixRef.value.show();
  });
};

const deleteRowData = (item) => {
  Modal.confirm({
    title: $t("dialog.delete_data.title"),
    content: $t("dialog.delete_data.desc"),
    okText: $t("btnText.ensure"),
    cancelText: $t("btnText.cancel1"),
    maskClosable: true,
    async onOk() {
      let res = await postPartSixDataDelete(item.id);
      if (res.code === 200) {
        message.success(res.msg || res.message);
        // await makeData();
        await getSixData();
      } else {
        message.error(res.msg);
      }
    },
    onCancel() {},
  });
};

onBeforeMount(async () => {});

const partSixDialogComplete = async () => {
  closeAllEdit();
  // await makeData();
  await getSixData();
  // dialogPartSixRef.value.close()
};

onMounted(async () => {
  // window.addEventListener("click", () => {
  //   closeAllEdit()
  // });

  getPartParamsData();
  // await makeData();
  await getSixData();
});
</script>
<style scoped lang="less">
@import url("./common.less");
.part-title {
  margin-top: 24px;
}

.table-2 {
  .table-header {
    background-color: #f5f8fa;
  }
  .table-body {
    .row {
      position: relative;
      .edit-panel {
        top: 0;
        left: 0;
        bottom: 0;
        position: absolute;
        background-color: #06214c;
        min-width: 30%;
        max-width: 100%;
        z-index: 9;
        color: #fff;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 25px;
        text-align: left;
        padding: 0 50px;
        span {
          cursor: pointer;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .part-title {
    margin-top: 82px;
  }
  .table2-header-title {
    .footer-btn {
      .ant-btn {
        width: 60px !important;
      }
    }
  }
  .table-2 {
    .table-body {
      .row {
        .edit-panel {
          background-color: #06214c;
          min-width: 30%;
          max-width: 100%;
          z-index: 9;
          color: #fff;
          font-size: 64px;
          display: flex;
          align-items: center;
          gap: 72px;
          text-align: left;
          padding: 0 100px;
          span {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
